<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文件上传</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 20px;
        }

        form {
            width: 400px;
            margin: 0 auto;
            background-color: #ffffff;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 10px;
        }

        input[type="text"],
        input[type="date"],
        input[type="file"],
        select {
            padding: 10px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            outline: none;
        }

        input[type="text"]:focus,
        input[type="date"]:focus,
        input[type="file"]:focus,
        select:focus {
            border-color: #4caf50;
        }

        input[type="submit"] {
            padding: 10px 20px;
            background-color: #4caf50;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.3s ease;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<form action="UploadServlet" method="post" enctype="multipart/form-data">
    <label>
        上传者：
        <input type="text" name="name"/>
    </label>
    <label>
        上传文件：
        <input type="file" name="myfile"/>
    </label>
    <label>
        上传日期：
        <input type="date" name="upload_date"/>
    </label>
    <label>
        文献类型：
        <select name="document_type">
            <option value="期刊文章">期刊文章</option>
            <option value="论文">论文</option>
            <option value="学位论文">学位论文</option>
        </select>
    </label>
    <label>
        关键字：
        <input type="text" name="keywords"/>
    </label>
    <input type="submit" value="上传"/>
</form>
<script>
    window.addEventListener('DOMContentLoaded', function () {
        var form = document.querySelector('form');
        var submitButton = document.querySelector('input[type="submit"]');
        var successMessage = document.createElement('p');
        successMessage.style.color = "#4caf50";
        successMessage.innerText = "上传成功！";

        form.addEventListener('submit', function (event) {
            var nameInput = document.querySelector('input[name="name"]');
            var fileInput = document.querySelector('input[name="myfile"]');
            var dateInput = document.querySelector('input[name="upload_date"]');
            var typeSelect = document.querySelector('select[name="document_type"]');
            var keywordsInput = document.querySelector('input[name="keywords"]');

            var isValid = true;

            if (nameInput.value === "") {
                isValid = false;
                nameInput.style.borderColor = "red";
            }
            if (fileInput.value === "") {
                isValid = false;
                fileInput.style.borderColor = "red";
            }
            if (dateInput.value === "") {
                isValid = false;
                dateInput.style.borderColor = "red";
            }
            if (typeSelect.value === "") {
                isValid = false;
                typeSelect.style.borderColor = "red";
            }
            if (keywordsInput.value === "") {
                isValid = false;
                keywordsInput.style.borderColor = "red";
            }

            if (!isValid) {
                event.preventDefault();
                alert("请填写完整的信息！");
            } else {
                form.appendChild(successMessage);
            }
        });
    });
</script>
</body>
</html>